<template>
  <div class="register_container">
    <div class="register_box">
    
     <!-- 注册表单区域 -->
     
  <el-form
    :model="registerForm"
    status-icon
    :rules="rules"
    ref="registerForm"
    label-width="100px"
    class="demo-registerForm"
  >
    
                    
   <el-form-item class:inps label="用户名" prop="username">
      <el-input
        v-model="registerForm.username"
        prefix-icon="iconfont el-icon-user"
      ></el-input
    ></el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input
        type="password"
        v-model="registerForm.pass"
        autocomplete="off"
        prefix-icon="iconfont el-icon-lock"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input
        type="password"
        v-model="registerForm.checkPass"
        autocomplete="off"
         prefix-icon="iconfont el-icon-lock"
      ></el-input>
    </el-form-item>
       
  <div class="form-group" style="display: flex;">
                      <div>
                <el-form-item  label="验证码"  >         
                          <el-input type="text" id="code" v-model="code" class="code"  placeholder="请输入验证码" />
                 </el-form-item>    
                     </div>


    <div class="login-code" @click="refreshCode">
                      <!--验证码组件-->  <SIdentify />
                      <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                    </div>
   
      <el-form-item>
      <el-button type="primary" @click="submitRegisterForm('registerForm')"
        >提交</el-button
      >
     
    </el-form-item>
  </el-form>
  </div>
      <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    >
    </vue-particles>
  </div>
</template>


<script>
import SIdentify  from '../components/sidentify'

export default {
  name:'enlist',
  components:{SIdentify},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
     
    return {
       identifyCodes: "1234567890",
      identifyCode: "",
      code:"",
    
      registerForm: {
        pass: "",
        checkPass: "",
        username: "",
      },
      Form:{
        password:"",
        username:"",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
 
  
  created(){
   //初始化验证码
   this.refreshCode()
 },

  mounted(){
     this.identifyCode = "";
     this.makeCode(this.identifyCodes, 4);
 },
 
  methods: {
    //验证码
  randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
  },
       
  refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
  },
 makeCode(o, l) {
     for (let i = 0; i < l; i++) {
         this.identifyCode += this.identifyCodes[
           this.randomNum(0, this.identifyCodes.length)
         ];
     }
     console.log(this.identifyCode);
 },

    submitRegisterForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        }
       this.Form.password = this.registerForm.pass;
       this.Form.username = this.registerForm.username;
       
      if(this.code == ""){
        alert("请输入验证码！");
        return;
      }
      if(this.identifyCode !== this.code){
        this.code = '';
        this.refreshCode();
        alert("请输入正确的验证码！");
        return;
      }
        //访问后端接口
        const { data: res } = await this.$http.post(
          "user/register",
          this.Form
        );
        // 添加判断用户是否存在的逻辑
        if (res.code == 200) {
          // this.$http.post("/user",this.Form);
          this.$message.success("注册成功！");
        } else if (res.code == 20005) {
          this.$message.error("用户名已存在！");
        } //code为200表示注册成功，20005表示用户名已存在
        //this.$http.put("/user",this.registerForm);
        else {
          this.$message.error("注册失败！");
        }
        console.log(res);
      });
    },
    
    // 清空表单
    resetRegisterForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.register_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.register_box {
  
  

   width: 480px;
  height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #2e527bb3;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;

}
.code{
     width:124px;
     height:31px;
     border:1px solid rgba(186,186,186,1);
 }
 .login-code{
      cursor: pointer;
      width:10px;
      height:10px;
 }
 button{
 
  
  width: 50%;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  margin-top: 18px;
  box-shadow: none;
  color: white;
 

}



  .inps {
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 12px;
  }
.el-form {
  padding: 32px;
  position: absolute;
 
  width: 100%;
  box-sizing: border-box;
}


</style>
